<!-- Created by duwanfu on 2018/10/24 -->
<template>
  <div class="wraper">
    <div class="mine-header clearfix">
      <div class="avatar fl">
        <img :src="headPortrait" alt="">
      </div>
      <div class="avatar-detail fl">
        <div>
          <span class="wxname fl">{{name}}</span>
        </div>
        <div>
          <span class="userid">财值:{{rank}}</span>
        </div>
      </div>
    </div>

    <div class="mine-money-info">
      <div>
        <p>本周赚取(元)</p>
        <p>￥{{weekAmount || '0.00'}}</p>
        <!--<div>提现</div>-->
      </div>
      <div>
        <p>累计赚取(元)</p>
        <p>￥{{totalAmount || '0.00'}}</p>
        <!--<div>明细</div>-->
      </div>
    </div>

    <div class="content">
      <div class="title">
        <span class="content-title">推广招募</span>
      </div>
      <div class="expand">
        <div @click="toDownLoad" class="expand-cont expand-l">
          <div>
            <img :src="img.imgL" alt="">
          </div>
          <div>
            <div>推广信用卡</div>
            <div>奖励随时提现</div>
          </div>
        </div>
        <div @click="toDownLoad" class="expand-cont expand-r">
          <div>
            <img :src="img.imgR" alt="">
          </div>
          <div>
            <div>招募合伙人</div>
            <div>开启赚钱之旅</div>
          </div>
        </div>
      </div>
      <div class="problem">
        <div>
          <div>
            <div class="color1">
              <div></div>
            </div>
          </div>
          <div>权益说明</div>
        </div>
        <div>
          <div>
            <div class="color2">
              <div></div>
            </div>
          </div>
          <div>常见问题</div>
        </div>
        <div>
          <div>
            <div class="color3">
              <div></div>
            </div>
          </div>
          <div>联系客服</div>
        </div>
        <div>
          <div>
            <div class="color4">
              <div></div>
            </div>
          </div>
          <div>推广技巧</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {browserMixin} from '../../assets/js/mixin'

  export default {
    name: "mine",
    mixins: [browserMixin],
    data() {
      return {
        headPortrait: '',
        name: '',
        rank: '',
        userId: '',
        weekAmount: '',
        totalAmount: '',
        img: {
          // 预留图片名字
          // imgL: require('../../assets/imgs/mine-expand-l.png'),
          // imgR: require('../../assets/imgs/mine-expand-r.png')
          // demo
          imgL: require('../../assets/imgs/mine-red-bg.png'),
          imgR: require('../../assets/imgs/mine-blue-bg.png')
        }
      }
    },
    created() {
      this.getMineInfo()
    },
    methods: {
      getMineInfo() {
        this.$http.getMineInfo().then(res => {
          // this.res = JSON.stringify(res)
          if (res.message == '成功') {
            let data = res.data;
            console.log(data.headPortrait, data.rank, data.userId, data.weekAmount, data.totalAmount);
            this.headPortrait = data.headPortrait;
            this.name = data.name;
            this.rank = data.rank;
            this.userId = data.userId;
            this.weekAmount = data.weekAmount;
            this.totalAmount = data.totalAmount;
          }
        })
      },
      toDownLoad () {
        this.$router.push('/downLoadApp')
      }
    },
  }
</script>

<style lang="scss" scoped>
  .wraper {
    min-height: calc(100vh - 1rem);
    background-color: #fff;
    padding-bottom: 1rem;
    .mine-header {
      padding: .2rem .3rem .3rem;
      .avatar {
        width: .98rem;
        height: .98rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .avatar-detail {
        margin-left: .24rem;
        width: calc(100vw - 1.82rem);
        height: .98rem;
        & > div {
          width: 100%;
          height: 50%;
          line-height: .49rem;
          font-size: .24rem;
          color: #999;
          &:nth-child(1) {
            margin-top: .1rem;
            color: #333;
            font-weight: 700;
            height: .3rem;
            line-height: .3rem;
            display: block;
            float: left;
            font-size: .3rem;
          }
        }
      }
    }
    .mine-money-info {
      width: 100%;
      height: 2rem;
      box-sizing: border-box;
      padding: 0 .3rem;
      display: flex;
      justify-content: space-between;
      & > div {
        width: 3.3rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        & > p:nth-child(1) {
          font-size: .24rem;
          padding: .2rem 0;
        }
        & > p:nth-child(2) {
          font-size: .36rem;
          padding: .1rem 0;
          /*padding: .15rem 0 .25rem;*/
        }
        & > div:nth-child(3) {
          width: 1.2rem;
          height: .44rem;
          border-radius: .22rem;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #f9e3b1;
          font-size: .26rem;
          color: #dd001b;
        }
      }
      & > div:nth-child(1) {
        background: url("../../assets/imgs/mine-red-bg.png") no-repeat;
        background-size: cover;
      }
      & > div:nth-child(2) {
        background: url("../../assets/imgs/mine-blue-bg.png") no-repeat;
        background-size: cover;
      }
    }
    .content {
      width: 100%;
      box-sizing: border-box;
      background: #fff;
      padding: 0 .3rem;
      margin-top: .2rem;
      /*box-shadow: 0 0 10px rgba(0, 0, 0, .1);*/
      .title {
        font-size: .3rem;
        height: .6rem;
        line-height: .6rem;
        margin-bottom: .1rem;
        .content-title {
          padding-left: .2rem;
          font-weight: bold;
          background: url("../../assets/imgs/icon-title.png") no-repeat left center;
          background-size: .06rem .28rem;
        }
      }

      .expand {
        padding: .1rem 0 .3rem;
        width: 100%;
        height: 1.2rem;
        display: flex;
        justify-content: space-between;
        &-cont {
          width: 3.3rem;
          height: 100%;
          box-sizing: border-box;
          padding-left: .2rem;
          display: flex;
          align-items: center;
          border-radius: 10px;
          box-shadow: 0 5px 20px rgba(0, 20px, 0, .2);
          & > div:nth-child(1) {
            width: .8rem;
            height: .8rem;
            margin-right: .3rem;
            border-radius: 50%;
            overflow: hidden;
            background: #dfdfdf;
            img {
              width: 100%;
              height: 100%;
            }
          }
          & > div:nth-child(2) {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            & > div {
              height: 40%;
              display: flex;
              align-items: center;
              /*justify-content: flex-start;*/
              align-items: flex-end;
              font-size: .26rem;
              font-weight: bold;
              &:nth-child(2) {
                align-items: flex-start;
                font-size: .22rem;
                font-weight: normal;
                color: #dd001b;
              }
            }
          }
        }
      }
      .problem {
        padding: .2rem;
        display: flex;
        justify-content: space-between;
        & > div {
          width: 1.2rem;
          height: 1.5rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          & > div:nth-child(1) {
            display: flex;
            justify-content: center;
            align-items: center;
            & > div {
              width: .9rem;
              height: .9rem;
              border-radius: 50%;
              background: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
              & > div {
                width: .69rem;
                height: .68rem;
                border-radius: 50%;
              }
            }
          }
          & > div:nth-child(2) {
            text-align: center;
            font-weight: bold;
            font-size: .24rem;
          }
        }
        .color1 {
          box-shadow: 0 5px 20px rgba(11, 164, 75, .3);
          & > div {
          background: -webkit-linear-gradient(top, #38f083, #079e46);
          }
        }
        .color2 {
          box-shadow: 0 5px 20px rgba(112, 64, 253, .3);
          & > div {
          background: -webkit-linear-gradient(top, #b692ff, #8259fd);
          }
        }
        .color3 {
          box-shadow: 0 5px 20px rgba(250, 125, 43, .3);
          & > div {
          background: -webkit-linear-gradient(top, #fec984, #fa7e2e);
          }
        }
        .color4 {
          box-shadow: 0 5px 20px rgba(49, 143, 253, .3);
          & > div {
          background: -webkit-linear-gradient(top, #5bd7fc, #328efd);
          }
        }
      }
    }
  }
</style>
